const path = require('path'),
      w    = require('webpack'),
      hwp  = require('html-webpack-plugin'),
      iw   = require('html-webpack-inline-chunk-plugin');

module.exports = {
    entry:{
        idx: './src/idx.js'
    },
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: '[name].[chunkHash].js',
        // publicPath: './dist/'
        publicPath: '/'
    },
    module: {
        rules: [{
		    test: /\.js$/,
		    use:[{
			loader: 'babel-loader',
			options: {
			    presets: ['env']
			}
		    }]
		},{
		test: /\.css$/,
		use: [{
		    loader:'style-loader'
		},{
		    loader: 'css-loader'
		}]
	    },{
	    test: /\.(png|jpeg|jpg)$/,
	    use: [{
		loader: 'url-loader',
		options: {
		    limit: 2,
		    // 所有图片扔到assets/img/ 下
                    outputPath: './assets/img/'
		}
	    }]
	    },{
            // html-loader
	    test: /\.html$/,
            use: [{
		loader: 'html-loader',
		options: {
		    // attrs: ['img:src'] // 默认有这个,如果只是对图片处理这里传不传的都行，默认就给你把图片处理了，因为默认选择器是处理图片。
		    attrs: ['img:src', 'img:data-src'], //告诉webpack匹配img属性是data-src的让webpack处理
		    
		}
	    }]
	}]
    }
    ,
    plugins: [
        // 注意插件的书写顺序

        // 提取公共代码
        new w.optimize.CommonsChunkPlugin({
            name: 'manifest'
        }),

        new iw({
            inlineChunks: ['manifest'] // 希望插入到Html chunk 名称 拿进来的manifest以标签的形式展示，注意昂，上面的hwp一定拿到页面里面来否则没作用也就是chunks
        }),

        // 打包后注意publicPath 如果有多余路径可以删掉的。
	new hwp({
	    // filename: 'html/index.html', // 这里前面可以加输出到哪路径+文件名字 都输出到外层目录指定的那个目录output
	    filename: 'index.html', // 这里前面可以加输出到哪路径+文件名字
            template: './index.html',
            inject: true, // 当这个设置为false 生成的js css 就不会插入到html中去, 默认为true
            chunks: ["idx", "manifest"], // 如果不指定任何chunks chunk name 全部都塞到页面 entry 相关的全部塞入。这了加入manifest chunk name 是因为需要把生成的这个公用manifest拿到html页面中
            minify: { collapseWhitespace: true }, // 开启压缩,借助了Html minify 实现的
            
	}),

    ]
}
